<template>
	<view class="index">
		<!-- 1 搜索框 -->
		<UgoSearch></UgoSearch>
		<!-- 2 轮播图 -->
		<u-swiper :list="swiperList" name="image_src" height="340" :effect3d="true"></u-swiper>
		<!-- 3 导航 -->
		<view class="nav u-flex">
			<navigator v-for="item in navList" :key="item.name" class="u-flex-1 u-p-15">
				<u-image width="100%" mode="widthFix" :src="item.image_src"></u-image>
			</navigator>
		</view>
		<!-- 4 楼层 -->
		<view class="floor">
			<view class="floor-group" v-for="item1 in floorList" :key="item1.floor_title.name">
				<!-- 标题 -->
				<view class="floor_title">
					<u-image width="100%" mode="widthFix" :src="item1.floor_title.image_src"></u-image>
				</view>
				<!-- 列表图片 -->
				<view class="floor_list">
					<navigator v-for="item2 in item1.product_list" :key="item2.name">
						<u-image width="100%"
						height="100%"
						mode="scaleToFill" :src="item2.image_src"></u-image>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList:[],//轮播图数组
				navList:[],//导航数组
				floorList:[],//楼层数组
			}
		},
		onLoad() {
			// 获取轮播图数据
			this.getSwiper()
			// 获取导航数据
			this.getNav()
			// 获取楼层数据
			this.getFloor()
		},
		methods: {
			// 获取轮播图数据
			async getSwiper(){
				// const [err,res]=await uni.request({
				// 	url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"
				// })
				// console.log(res);
				// this.swiperList=res.data.message
				const res=await this.$u.http.get("/home/swiperdata")
				console.log(res);
				this.swiperList=await this.$u.http.get("/home/swiperdata")
			},
			// 获取导航数据
			async getNav(){
				this.navList=await this.$u.http.get("/home/catitems")
			},
			//获取楼层数据
			async getFloor(){
				this.floorList=await this.$u.http.get("/home/floordata")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.floor-group{
		margin: 10rpx 0;
	}
	.floor_title {
		margin: 15rpx 0;
	}

	.floor_list {
		padding: 0 12rpx;
		// 清除浮动
		overflow: hidden;
	}

	navigator {
		// 这里使用浮动布局更好些
		float: left;
	}
	// 第一张图片
	navigator:nth-child(1) {
		width: 232rpx;
    	height: 386rpx;
	}
	// 后4张图片
	navigator:nth-last-child(-n+4){
		width: 233rpx;
    	height: 188rpx;
	}
	// 第2，4张图片
	navigator:nth-child(2),
	navigator:nth-child(4){
		margin: 0 15rpx;
	}
	// 最后2张图片
	navigator:nth-last-child(-n+2){
		margin-top: 10rpx;
	}
</style>
